<template>
  <div clas="xima">
    <header>
      <ol class="breadcrumb">
        <li>
          <router-link to="/single">DRGs案例</router-link>
        </li>
        <li>
          <router-link to="/multipleGroup">批量分组管理</router-link>
        </li>
      </ol>
    </header>
    <div class="ximacontent">
      <div class="row">
        <div class="col-xs-12 col-md-8">
          <div class="singleTable">
            <div class="singleTitle" style="display:flex;margin:0 20px 50px 0;">
              <div class="input-group">
                <span class="input-group-addon" id="basic-addon1"
                  >诊断编码或名称:</span
                >
                <input
                  type="text"
                  class="form-control"
                  placeholder="请输入诊断编码或名称"
                  aria-describedby="basic-addon1"
                />
              </div>
              <div class="input-group" style="margin-right:20px;">
                <span class="input-group-addon" id="basic-addon1"
                  >操作编码:</span
                >
                <input
                  type="text"
                  class="form-control"
                  placeholder="请输入操作编码"
                  aria-describedby="basic-addon1"
                />
              </div>
              <button
                type="button"
                class="btn btn-primary"
                style="margin-right:20px;"
              >
                <span class="glyphicon glyphicon-search">查询</span>
              </button>
              <button
                type="button"
                class="btn btn-success"
                style="margin-right:20px;"
              >
                上传<span class="glyphicon glyphicon-arrow-up"></span>
              </button>
              <button type="button" class="btn btn-info">
                下载<span class="glyphicon glyphicon-arrow-down"></span>
              </button>
            </div>
            <table class="table table-bordered  table-hover table-success">
              <thead class="thead-default">
                <tr>
                  <th>诊断/编码操作</th>
                  <th>名称</th>
                  <th>DRG编码</th>
                  <th>名称</th>
                  <th>CMI</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in tableData" :key="index">
                  <td style="text-align:center;">{{ item.operate }}</td>
                  <td style="text-align:center;">{{ item.name }}</td>
                  <td style="text-align:center;">{{ item.DRGs }}</td>
                  <td style="text-align:center;">{{ item.name1 }}</td>
                  <td style="text-align:center;">{{ item.cmi }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class="col-xs-6 col-md-4">
          <div class="guide">
            <div class="guideTop">
              <ul>
                <li>
                  <router-link to="/single">单个编码查询</router-link>
                </li>
                <hr class="simple" color="#6f5499" />
                <li role="separator" class="divider"></li>
                <li>
                  <router-link to="/multiple">批量编码查询</router-link>
                </li>
                <hr class="simple" color="#6f5499" />
                <li>
                  <router-link to="/singleGroup">病案分组管理</router-link>
                </li>
                <hr class="simple" color="#6f5499" />
                <li>
                  <router-link to="/multipleGroup">批量分组管理</router-link>
                </li>
              </ul>
            </div>
            <hr
              style="filter: alpha(opacity=100,finishopacity=0,style=2)"
              width="80%"
              color="#6f5499"
              size="10"
            />
            <div class="guideTip">
              <p class="connect_h">联系我们</p>
              <el-divider></el-divider>
              <hr
                style="border-top:1px solid #ccc;"
                width="100%"
                color="#ccc"
                size="1"
              />
              <div><span>电话：861068005755,861068006083</span></div>
              <div><span>Email: xmbj2005@163.com</span></div>
              <div><span>邮箱: 492800904@qq.com</span></div>
              <div>
                <span>地址: 北京市西城区西直门外大街18号金贸大厦A座935</span>
              </div>
              <P>
                <img src="../assets/code.jpg" alt="" />
              </P>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        {
          operate: "0.0102",
          name: "颈部血管治疗性超声",
          DRGs: "FN11",
          name1: "外周动脉经皮血管内检查和/或治疗，伴有严重并发症与合并症",
          cmi: "2.18"
        },
        {
          operate: "0.0102",
          name: " 颈部血管治疗性超声",
          DRGs: "FN15",
          name1: "外周动脉经皮血管内检查和/或治疗，不伴并发症与合并症",
          cmi: "1.5"
        },
        {
          operate: "00.0200x001",
          name: "血管治疗性超声",
          DRGs: "FM21",
          name1: "其他经皮心血管治疗，伴有严重并发症与合并症",
          cmi: "2.47"
        },
        {
          operate: "00.0200x001",
          name: "心脏血管治疗性超声",
          DRGs: "FM23",
          name1: "其他经皮心血管治疗，伴有并发症与合并症",
          cmi: "2.17"
        },
        {
          operate: "00.0200x001",
          name: "心脏血管治疗性超声",
          DRGs: "FM25",
          name1: "其他经皮心血管治疗，不伴并发症与合并症",
          cmi: "1.43"
        },
        {
          operate: "0.03",
          name: "周围血管治疗性超声",
          DRGs: "FN11",
          name1: "外周动脉经皮血管内检查和/或治疗，伴有严重并发症与合并症",
          cmi: "2.18"
        },
        {
          operate: "0.03",
          name: "周围血管治疗性超声",
          DRGs: "FN15",
          name1: "外周动脉经皮血管内检查和/或治疗，不伴并发症与合并症",
          cmi: "1.5"
        },
        {
          operate: "0.03",
          name: "周围血管治疗性超声",
          DRGs: "ZJ11",
          name1:
            "与多发重要创伤诊断有关的其他手术室操作，伴有严重并发症与合并症",
          cmi: "8.14"
        },
        {
          operate: "0.03",
          name: "周围血管治疗性超声",
          DRGs: "ZJ15",
          name1: "与多发重要创伤诊断有关的其他手术室操作，不伴并发症与合并症",
          cmi: "5.52"
        },
        {
          operate: "0.1",
          name: "化学治疗物质植入",
          DRGs: "BJ11",
          name1: "神经系统其他手术，伴有严重并发症与合并症",
          cmi: "3.06"
        },
        {
          operate: "0.1",
          name: "化学治疗物质植入",
          DRGs: "BJ13",
          name1: "神经系统其他手术，伴有并发症与合并症",
          cmi: "1.81"
        },
        {
          operate: "0.1",
          name: "化学治疗物质植入",
          DRGs: "BJ15",
          name1: "神经系统其他手术，不伴并发症与合并症",
          cmi: "1.36"
        },
        {
          operate: "00.1500x001",
          name: "输注白细胞介素",
          DRGs: "RB19",
          name1: "急性白血病化学治疗和/或其他治疗",
          cmi: "2.52"
        },
        {
          operate: "00.1500x002",
          name: "注射阿地白细胞介素",
          DRGs: "RB19",
          name1: "急性白血病化学治疗和/或其他治疗",
          cmi: "2.52"
        },
        {
          operate: "00.2400x001",
          name: "冠状动脉血管内超声(IVUS)",
          DRGs: "FC29",
          name1: "冠状动脉搭桥伴心导管操作",
          cmi: "2.01"
        },
        {
          operate: "00.2400x001",
          name: "冠状动脉血管内超声(IVUS)",
          DRGs: "FM31",
          name1: "经皮心导管检查操作，伴有严重并发症与合并症",
          cmi: "3.39"
        }
      ]
    };
  },
  methods: {
    search1() {
      //获取第一个input输入的值
      let input1 = document.getElementById("name1").value;
      //获取data中tableData数组
      let tableData = this.tableData;
      //定义一个新数据存放取出来的值
      //input的值是否等于tableData数据的值
      let arr1 = tableData.filter(function(data) {
        return data.operate === "input1";
      });
      console.log(arr1);
    },
    search2() {
      let input2 = document.getElementById("name2").value;
      let tableData = this.tableData;
      let index2 = tableData.indexOf(input2);
      console.log(index2);
    }
  }
};
</script>
<style>
.comm1,
.comm2,
.comm3 {
  text-align: center;
}
.researchContent {
  width: 100%;
}

.substance1 {
  text-align: center;
}

.guide {
  width: 100%;
}

.guideTop {
  background-color: #0a77a0;
  margin-bottom: 1.875rem /* 30/16 */;
}

.guideTop ul {
  list-style-type: none;
  margin: 0;
}

.guideTop ul li a {
  color: #fff;
}

.guideTip .connect_h {
  font-size: 20px;
}
/* 中等屏幕（桌面显示器，大于等于 992px） */
@media screen and (min-width: 992px) {
  .researchContent {
    width: 100%;
  }
  .comm1,
  .comm2,
  .comm3 {
    float: left;
    width: calc(100% / 3);
  }
  .comm2 img {
    width: 100%;
  }
  .comm3 {
    border-right: 1px solid #ccc;
  }
  .comm1 p {
    letter-spacing: 4px;
  }
  .comm3 .areas {
    font-size: 20px;
    color: #0a77a0;
  }
  .comm3 img {
    width: 25rem /* 400/16 */;
  }
  .comm3 p {
    font-size: 14px;
    letter-spacing: 4px;
    line-height: 25px;
  }
  .comm1.content-title {
    color: #0a77a0;
    font-size: 20px;
  }
}
</style>
